<template>
    <div class="grade">
        <el-row>
            <el-button type="primary" @click="dialogVisible = true">
                <i class="el-icon-plus"></i> 添加班级</el-button
            >
        </el-row>
        <el-table :data="list" style="margin-top: 15px" border>
            <el-table-column label="班级名" prop="name"></el-table-column>
            <el-table-column label="课程名" prop="topic"></el-table-column>
            <el-table-column label="教室号" prop="room_name"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scoped">
                    <el-button
                        type="primary"
                        size="mini"
                        @click="onEditClicked(scoped.rows)"
                        >编辑</el-button
                    >

                    <el-button
                        type="danger"
                        size="mini"
                        @click="onDeleteClicked(scoped.rows)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="添加班级" :visible.sync="dialogVisible" width="50%">
            <el-input
                v-model="form.name"
                placeholder="请输入班级名称"
            ></el-input>

            <el-input
                v-model="form.topic"
                placeholder="请输入课程名称"
            ></el-input>

            <el-select v-model="form.room_id" placeholder="请选择教室">
                <el-option
                    v-for="item in rooms"
                    :key="item.id"
                    :label="item.sn"
                    :value="item.id"
                >
                </el-option>
            </el-select>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    created() {
        this.getList();
        this.getRoomList();
    },
    data() {
        return {
            list: [],
            rooms: [],
            dialogVisible: false,
            form: {
                name: "",
                topic: "",
                room_id: "",
            },
        };
    },
    methods: {
        async getList() {
            const res = await this.$http.get("/grades");
            // console.log(res.data);
            this.list = res.data.data;
        },
        async getRoomList() {
            const res = await this.$http.get("/rooms");
            // console.log(res.data);
            this.rooms = res.data.data;
        },
        async save() {
            console.log({ ...this.form });
            const res = await this.$http.post("/grades", { ...this.form });
            if (res.data.code !== 201) {
                this.$message.error(res.data.message);
                return;
            }
            // 添加班级成功后，关闭弹框，刷新列表
            this.$message.success(res.data.message);
            this.dialogVisible = false;
            this.getList();
        },
        onEditClicked() {},
        onDeleteClicked() {},
    },
};
</script>
